<template>
  <div>
   
    <div class="card" v-if="flag == 'def' ? true : ''">
      <!-- 标题 -->
    <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="backTo">返回</span>
        </div>

        <h2 class="header-m" >地址管理</h2>
        <div></div>
      </div>
    </div>
      <van-address-list
        :disabled-list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit-disabled="onEdit"
        @select-disabled="select"
      />
    </div>

    <!-- 编辑地址 -->
    <div class="edit" v-if="flag == 'edit' ? true : ''">
       <!-- 标题 -->
       <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="toAddress">返回</span>
        </div>

        <h2 class="header-m" >地址管理</h2>
        <div></div>
      </div>
    </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="tel"
          name="电话"
          label="电话"
          placeholder="电话"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="address"
          label="地区选择"
          :placeholder="address"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field
          v-model="addressDetail"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field name="switch" label="是否设置默认地址">
          <template #input>
            <van-switch v-model="isDefault" size="20" />
          </template>
        </van-field>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
        <div style="margin: 16px" @click="onDelete">
          <van-button round block type="danger">删除</van-button>
        </div>
      </van-form>
    </div>

    <!-- 点击新增 -->
    <div class="addAddress" v-if="flag == 'add' ? true : ''">
      <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="toAddress">返回</span>
        </div>

        <h2 class="header-m" >地址管理</h2>
        <div></div>
      </div>
    </div>
      <van-address-edit
        :area-list="areaList"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
       
      />
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import {
  getListAction,
  saveAction,
  deleteAction,
} from "@/api/user";
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  name: "",
  data() {
    return {
      id: "",
      arr: [],
      isDefault: false,
      deleId: "",
      areaList,
      address: "",
      flag: "",
      searchResult: [],
      name: "",
      tel: "",
      addressDetail: "",
      list: [],

      showArea: false,
    };
  },
  mounted() {
    this.flag = "def";
    this.init();
  },
  methods: {
    onConfirm(values) {
      console.log("12", values);
      this.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    // 初始化
    init() {
      this.flag = "def";
      //渲染初始列表
      getListAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].is_default == 1) {
            res.data[i].is_default = true;
          } else {
            res.data[i].is_default = false;
          }
          res.data[i].isDefault = res.data[i].is_default;
        }
        // 替换data里的mobile
        res.data = JSON.parse(
          JSON.stringify(res.data).replace(/mobile/g, "tel")
        );
        //   let c =  res.data.map(function (e) {
        //       return { tel: e.mobile };
        //     });
        //     console.log(c);
        console.log(res.data);
        this.list = res.data;
      });
    },

    toAddress() {
      this.init();
    },
    backTo() {
      this.$router.back();
    },

    onAdd() {
      Toast("新增地址");
      this.flag = "add";
    },

    // 增加上传地址
    onSave(content) {
      this.address = content.province.concat(
        ",",
        content.city,
        ",",
        content.county
      );
      // console.log(this.address);
      Dialog.confirm({
        title: "是否添加?",
      }).then(()=>{
        saveAction({
        userName: content.name,
        telNumber: content.tel,
        detailadress: content.addressDetail,
        checked: content.isDefault,
        address: this.address,
        addressId: "",
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
      this.init();

      });
      this.init();

      })
      
    },
    //编辑

    onEdit(item) {
      // 点击图标后改变flag,传递页面信息与id
      this.flag = "edit";
      this.address = item.address;
      this.name = item.name;
      this.tel = item.tel;
      this.isDefault = item.isDefault;
      this.addressDetail = item.address_detail;
      this.id = item.id;
    },
    onSubmit() {
      saveAction({
        userName: this.name,
        telNumber: this.tel,
        detailadress: this.addressDetail,
        checked: this.isDefault,
        address: this.address,
        addressId: this.id,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.init()
      });
      this.init()
    },

    //删除地址

    onDelete() {
      Dialog.confirm({
        title: "是否删除",
      })
        .then(() => {
          deleteAction({
            id: this.id,
          }).then(res=>{
            console.log(res);
            this.init()
          })
        })
        .catch(() => {
          // on cancel
        });
    
      this.init();
    },
    // 点击跳转
    select(item) {
      this.$store.commit("reAddress", item.id);
      this.$router.go(-1);
      console.log("12");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>
